<template>
    <div>
      <div id="housechart" style="width: 483px; height: 340px;"></div>
    </div>
  </template>
  
  <script>
  import * as echarts from 'echarts';
  
  export default {
    data() {
      return {
        chartData: {
          paid: { A: 0, B: 0, C: 0, D: 0 },
        },
      };
    },
    methods: {
      async searchList(parkname) {
        try {
          const { data: res } = await this.axios.get(
            `house/searchList?unitname=${parkname}&currPage=1&pageNum=4`
          );
          // console.log(res);
          this.chartData.paid[parkname] = res.total;
        } catch (error) {
          console.error(error);
          this.$message.error("请求失败: " + error.message);
        }
      },
  
      // 执行所有请求
      async fetchhouseData() {
        const parknames = ["A", "B", "C", "D"];
        for (const parkname of parknames) {
          await this.searchList(parkname);
        }
        this.updateCharthouse();
      },
  
      // 更新图表
      updateCharthouse() {
        const chartDom = document.getElementById('housechart');
        const myChart = echarts.init(chartDom);
        const houseoption = {
          title: {
            text: '小区分布统计',
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'left'
          },
          series: [
            {
              name: '楼栋数量',
              type: 'pie',
              radius: '50%',
              data: [
                { value: this.chartData.paid.A, name: 'A小区' },
                { value: this.chartData.paid.B, name: 'B小区' },
                { value: this.chartData.paid.C, name: 'C小区' },
                { value: this.chartData.paid.D, name: 'D小区' }
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        };
  
        myChart.setOption(houseoption);
      }
    },
    mounted() {
      this.fetchhouseData();
    }
  };
  </script>
  
  <style>
  /* 您可以在这里添加样式 */
  </style>